<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header jcsb">
        <span>{{ title }}钱包明细 </span>
        <el-button
          type="primary"
          style="styleBg"
          v-hasPermi="['financialman:paymentwallet:export']"
          @click="handleExport"
        >
          导出Excel</el-button
        >
      </div>
    </template>
    <div class="content">
      <el-select
        v-model="form.orderSoure"
        class="m-2 tableWidth"
        placeholder="订单来源"
        @change="selectChange"
        clearable
      >
        <el-option
          v-for="item in orderSoureList"
          :key="item"
          :label="item"
          :value="item"
          :disabled="item.disabled"
        />
      </el-select>
      <el-select
        @change="selectChange"
        v-model="form.orderType"
        class="m-2 ml10 tableWidth"
        placeholder="订单类型"
        clearable
      >
        <el-option
          v-for="item in orderTypeList"
          :key="item"
          :label="item"
          :value="item"
          :disabled="item.disabled"
        />
      </el-select>
      <el-select
        @change="selectChange"
        v-if="title == '收款' ? true : false"
        v-model="form.moneyType"
        class="m-2 ml10 tableWidth"
        placeholder="钱包类型"
        clearable
      >
        <el-option
          v-for="item in walletList"
          :key="item"
          :label="item"
          :value="item"
          :disabled="item.disabled"
        />
      </el-select>
      <el-select
        @change="selectChange"
        v-model="form.purseType"
        class="m-2 ml10 tableWidth"
        placeholder="交易类型"
        clearable
      >
        <el-option
          v-for="item in dealType"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled"
        />
      </el-select>
      <el-date-picker
        @change="selectChange"
        v-model="form.time"
        type="daterange"
        class="ml10"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :popper-options="{ placement: 'bottom-end' }"
      />
      <el-input
        @change="selectChange"
        v-model="form.keywords"
        class="w-50 m-2 ml10"
        placeholder="请输入手机号/订单内容"
        :prefix-icon="Search"
        clearable
        @clear="form.keywords = ''"
      />
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        class="tableHead"
        height="500px"
      >
        <el-table-column prop="fromSource" label="订单来源" />
        <el-table-column prop="financialType" label="订单类型" />
        <el-table-column prop="userMobile" label="用户信息" />

        <el-table-column
          v-if="title == '收款' ? true : false"
          label="设备"
          prop="device"
          width="120"
        >
          <template #default="scope">
            <span>{{ scope.row.device ?? '-' }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="serviceName" label="订单内容" /> -->
        <el-table-column label="订单内容" prop="serviceName">
          <template #default="scope">
            <span v-html="scope.row.serviceName"></span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="title == '收款' ? true : false"
          label="钱包类型"
          prop="device"
          width="120"
        >
          <template #default="scope">
            <span>{{
              scope.row.walletType == 1 ? '付款钱包' : '收款钱包'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="交易类型" prop="purseType" width="120">
          <template #default="scope">
            <span>{{ scope.row.purseType == 1 ? '支出' : '收入' }}</span>
          </template>
        </el-table-column>

        <el-table-column label="金额" prop="amount" width="120">
          <template #default="scope">
            <span v-if="scope.row.purseType == 1">
              <!-- <span>{{ scope.row.purseType == 1 ? '-' : '+' }}</span> -->
              {{ scope.row.amount > 0 ? '-' : '' }}{{ scope.row.amount }}</span
            >
            <span v-else-if="scope.row.purseType == 2"
              >{{ scope.row.amount > 0 ? '+' : '' }}{{ scope.row.amount }}</span
            >
          </template>
        </el-table-column>

        <el-table-column prop="creationTime" label="创建时间" sortable>
          <template #header="scope">
            <span class="creationTime">
              {{ scope.column.label }}

              <SortDown
                :class="current == 1 ? 'active' : ''"
                @click="sortBtn(1)"
                class="SortDown"
              />
              <SortUp
                :class="current == 2 ? 'active' : ''"
                @click="sortBtn(2)"
                class="SortUp"
              />
            </span>
          </template>
        </el-table-column>
      </el-table>

      <div class="right">
        <el-pagination
          v-model:current-page="params.page"
          v-model:page-size="params.pageSize"
          :page-sizes="[10, 20, 30]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="parseInt(params.total)"
          @size-change="pagination"
          @current-change="currentChange"
        />
      </div>
    </div>
  </el-card>
</template>
<script setup>
import { Search } from '@element-plus/icons-vue';
import { ref, onMounted } from 'vue';
import { getMoneyType, getMoneyLogExport } from '@/api/money/moneyLog.js';
const emit = defineEmits([
  'serchSelect',
  'sizeChange',
  'currentChange',
  'sort',
]);
const { tableData, loading, title, params } = defineProps({
  tableData: {
    type: [Object, Array], // 支持对象或数组
    default: () => [], // 默认值为空数组
  },
  loading: {
    type: Boolean,
    default: false, // Boolean 类型不需要函数返回值
  },
  title: {
    type: String,
    default: '', // 直接提供字符串默认值
  },
  params: {
    type: Object,
    required: true, // 表示必填属性
  },
});

const current = ref(null);
//订单来源
const orderSoureList = ref([]);
//订单类型
const orderTypeList = ref([]);
//钱包类型
const walletList = ref([]);
// 交易类型
const dealType = ref([
  {
    value: 2,
    label: '收入',
  },
  {
    value: 1,
    label: '支出',
  },
]);
const arr = ref([]);
const form = ref({
  orderSoure: '',
  orderType: '',
  moneyType: '',
  purseType: '',
  time: [],
  keywords: '',
  page: 1,
  pageSize: 10,
  timeStatr: '',
  timeEnd: '',
  sort: 'desc',
  walletType: title == '付款' ? 1 : 2,
});

const fetchMoneyLogExport = () => {
  const { ...otherFields } = form.value;

  getMoneyLogExport(otherFields)
    .then((res) => {
      if (res.code == 20000) {
        window.location.href = res.data.url;
        proxy.$modal.msgSuccess('导出成功');
      } else {
        proxy.$modal.msgSuccess('导出失败');
      }
    })
    .catch((error) => {
      console.log('error:', error);
    });
};
//导出exel表
const handleExport = () => {
  fetchMoneyLogExport();
};

const pagination = (val) => {
  emit('sizeChange', val);
};
const currentChange = (val) => {
  emit('currentChange', val);
};
// 时间转换年月日
const formatDate = (date) => {
  const year = date.getFullYear();
  // getMonth 返回的月份是从 0 开始的，因此需要加 1
  const month = date.getMonth() + 1;
  const day = date.getDate();

  // 使用 ES6 模板字符串进行格式化
  return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
};
const sortBtn = (type) => {
  current.value = type;
  current.value == 1 ? (form.value.sort = 'asc') : (form.value.sort = 'desc');
  emit('sort', form.value);
};
// 筛选
const selectChange = () => {
  arr.value = [];
  var startDate;
  var endDate;
  // 判断form表单是否有值
  if (!!form.value.time && !!form.value.time) {
    if (form.value.time[0] && form.value.time[1]) {
      startDate = formatDate(new Date(form.value.time[0]));
      endDate = formatDate(new Date(form.value.time[1]));
    } else {
      startDate = '';
      endDate = '';
    }
  }

  form.value.timeStatr = startDate ? startDate : '';
  form.value.timeEnd = endDate ? endDate : '';
  arr.value.push(startDate, endDate);

  form.value.time = arr.value;
  emit('serchSelect', form.value);
};
//获取钱包筛选接口
const SelectFilter = () => {
  getMoneyType().then((res) => {
    //订单来源
    orderSoureList.value = res.data.orderSoure;
    //订单类型
    orderTypeList.value = res.data.orderType;
    //钱包类型
    walletList.value = res.data.wallet;
  });
};
onMounted(() => {
  SelectFilter();
});
</script>

<style scoped lang="scss">
@import '@/assets/styles/global.scss';
:deep(.el-table .caret-wrapper) {
  display: none !important;
  height: 32px !important;
}
.creationTime {
  display: flex;
  align-items: center;
}
.tableHead {
  width: 100%;
  margin-top: 20px;
}
.w-50 {
  width: 200px;
}
.tableWidth {
  width: 120px;
}
.SortDown {
  height: 1em;
}
.SortUp {
  height: 1em;
  margin-left: -7px;
}
.right {
  margin-top: 20px;
}
.jcsb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.active {
  color: var(--primary-color) !important;
}
:deep(.el-button--primary) {
  background: var(--primary-color) !important;
}
:deep(.el-button--primary):hover {
  background: var(--primary-hover-color);
}
</style>
